<template>
  <div class="fixed-box">
    <div class="item">
      <span>票价：</span>
      <div class="separator1"></div>
      <span> ￥{{ price }}/人</span>
    </div>
    <div class="item">
      <span>机建费：</span>
      <div class="separator2"></div>
      <span> ￥30/人</span>
    </div>
    <div class="item">
      <span>保险费：</span>
      <div class="separator2"></div>
      <span> ￥{{ insuranceTotalPrice }}</span>
    </div>
    <div class="item">
      <span> 成人数：</span>
      <div class="separator3"></div>
      <span> {{ adultAmount }}</span>
    </div>
    <div class="item">
      <span>儿童数(半价)：</span>
      <div class="separator4"></div>
      <span> {{ childAmount }}</span>
    </div>

    <div class="total">
      <b>总计：</b>
      <span>￥{{ getTotalPrice }}</span>
    </div>
  </div>
</template>
<script lang="ts">
import { defineComponent,computed } from "vue";
import store from "@/store";


export default defineComponent({
  props: {
    adultAmount: Number,
    childAmount: Number,
    insuranceTotalPrice: Number,
  },
  setup(props) {
		const price = computed(() => store.state.ticketInfo.price);
		const getTotalPrice = computed(() => {
      return 1;
			// return ((props.adultAmount as number) + (props.childAmount as number) / 2) *
      //     store.state.ticketInfo.price +
      //   ((props.adultAmount as any) + (props.childAmount as any)) * 50 +
      //   (props.insuranceTotalPrice as any)
		});
	return {
		price,
		getTotalPrice,
	}	

	},
});
</script>
<style lang="scss" scoped>
@import "@/assets/css/config.scss";
.fixed-box {
  background: rgb(255, 247, 233);
  width: 300px;
  height: 200px;
  padding: 20px;
  border: 1px solid $themeLightGray;
  position: fixed;
  top: 320px;
  left: 970px;
}
.item div {
  display: inline-block;
  vertical-align: middle;
  height: 0px;
  border: 1px dashed rgb(213, 213, 213);
  border-width: 0 0 2px 0;
}
.item {
  margin-bottom: 10px;
  div.separator1 {
    width: 165px;
  }
  div.separator2 {
    width: 170px;
  }
  div.separator3 {
    width: 215px;
  }
  div.separator4 {
    width: 172px;
  }
}
.total {
  margin-top: 30px;
  b {
    font-size: 20px;
  }
  span {
    position: relative;
    left: 155px;
    font-size: 24px;
    color: rgb(255, 102, 0);
  }
}
</style>